<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
      }
      .text {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
      }
      .a {
        width: 500px;
        height: 500px;
        background-color: rgb(146, 169, 162);
      }
    </style>
  </head>
  <body>
    <div class="a" id="a"></div>
    <div id="text" draggable="true" class="text">JAY</div>
  </body>
  <script>
    window.onload = function () {
      var text = document.querySelector("#text");
      var a = document.querySelector("#a");
      text.ondragstart = function (e) {
        // 获取元素内容
        e.dataTransfer.setData("t", text.innerHTML);
        // 获取元素
        e.dataTransfer.setData("box", e.target.id);
        console.log("开始");
      };
      text.ondrag = function () {
        console.log("中间");
      };
      text.ondragend = function () {
        console.log("结束");
      };
        // 监听拖拽盒子的事件
        a.addEventListener("dragenter", function () {
          // e.preventDefault();
          console.log("进入时");
        });
      a.addEventListener("dragover", function (e) {
        // 取消阻止默认
        e.preventDefault();
        console.log("进入中", e);
      });
        a.addEventListener("dragleave", function () {
          // e.preventDefault();
          console.log("离开了");
        });
      a.addEventListener("drop", function (e) {
        e.preventDefault();
        // 放置元素内容
        a.innerHTML = e.dataTransfer.getData("t");
        // 放置元素
        var id = e.dataTransfer.getData("box");
        var elment = document.getElementById(id);
        a.appendChild(elment);
        console.log("放下了");
      });
    };
  </script>
</html>
